﻿@model Guline.Web.CentralModels.Object.Account
@{

    ViewBag.Title = "Guline~";
    Layout = "~/Areas/User/Views/Shared/_DashboardLayout.cshtml";
}
<span class="s_title_body_right">@Guline.Web.CentralLanguages.Main.lblAccountInfo</span>
<script type="text/javascript">
    function DoiTenHienThi() {
        var displayname = $("#DisplayName").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                DisplayName: displayname
            },
            url: "@Url.Action("DisplayName_Change", "Dashboard")",
            datatype: "json",
            success: function (data) {
                $('#namedisplay_id').empty();
                $('#namedisplay_id').append(data);
            }
        });
    };
    function DoiTen() {
        var lastname = $("#LastName").val()
        var firstname = $("#FirstName").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                FirstName: firstname,
                LastName: lastname
            },
            url: "@Url.Action("Name_Change", "Dashboard")",
            datatype: "json",
        success: function (data) {
            $('#name_id').empty();
            $('#name_id').append(data);
        }
    });
    };
    function DoiEmail() {
        var email = $("#Email").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                Email: email,
            },
            url: "@Url.Action("Email_Change", "Dashboard")",
            datatype: "json",
        success: function (data) {
            $('#email_id').empty();
            $('#email_id').append(data);
        }
    });
    };
    function DoiNgaySinh() {
        var day = $("#Days option:selected").val()
        var month = $("#Months option:selected").val()
        var year = $("#Years option:selected").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                Days: day,
                Months: month,
                Years: year,
            },
            url: "@Url.Action("Birthday_Change", "Dashboard")",
            datatype: "json",
        success: function (data) {
            $('#birthday_id').empty();
            $('#birthday_id').append(data);
        }
    });
    };
    function DoiGT() {
        var gender = $('#u_0_d').is(":checked")?"true":"false"
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                Gender: gender,
            },
            url: "@Url.Action("Gender_Change", "Dashboard")",
            datatype: "json",
        success: function (data) {
            $('#gender_id').empty();
            $('#gender_id').append("<b>"+data+"</b>");
        }
    });
    };
    function DoiSDT() {
        var sdt = $("#Phone").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                Phone: sdt,
            },
            url: "@Url.Action("Phone_Change", "Dashboard")",
            datatype: "json",
            success: function (data) {
            $('#phone_id').empty();
            $('#phone_id').append("<b>" + data + "</b>");
        }
    });
    };
    function KtraPassword() {
        var pass_old = $("#password_old").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                password_old: pass_old,
            },
            url: "@Url.Action("Check_Password", "Dashboard")",
            datatype: "json",
            success: function (data) {
                if (data == "false")
                {
                    $('#msg_id').empty();
                    $('#msg_id').append("<td colspan='2' style='color:red;text-align:center;height:39px;'><i>Mật khẩu không đúng!</i></td>");
                    document.getElementById("password_new").disabled = true;
                    document.getElementById("password_new1").disabled = true;
                }
                else {
                    $('#msg_id').empty();
                    $('#msg_id').append("<td colspan='2' style='color:green;text-align:center;height:39px;'><i>Nhập mật khẩu mới!</i></td>");
                    document.getElementById("password_new").disabled = false;
                    document.getElementById("password_new1").disabled = false;
                }
        }
    });
    };
    function DoiMK() {
        var password_new = $("#password_new").val()
        var id =@Model.ID
        $.ajax({
            type: "POST",
            data: {
                ID: id,
                password_new: password_new,
            },
            url: "@Url.Action("Password_Change", "Dashboard")",
            datatype: "json",
        success: function (data) {
            if (data == "true") {
                alert("Mật khẩu của bạn vừa được thay đổi!")
            }
            else
                alert("Mật khẩu không thể thay đổi!");
        }
    });
    };
</script>
<ul class="s_content_body_right">
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="namedisplay">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblDisplayName</span>
            <span class="s_content">
                @{
                    if (Model.DisplayName != null && Model.DisplayName != "")
                    {
                        <b id="namedisplay_id">@Model.DisplayName</b>
                    }
                    else
                    {
                        <i>Chưa nhập tên hiển thị</i>
                    }
                }


            </span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        @* javacript *@
        <script>
            $(document).ready(function () {
                $("#namedisplay").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#namedisplay").slideToggle();
                    $("#namedisplay_edit").slideToggle();
                });
                $("#cancel").click(function () {
                    $("#namedisplay").slideToggle();
                    $("#namedisplay_edit").slideToggle();
                })
                $("#DoiTenHienThi").click(function () {
                    DoiTenHienThi();
                    $("#namedisplay").slideToggle();
                    $("#namedisplay_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="namedisplay_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblDisplayName</span>
            @using (Html.BeginForm("DisplayName_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    <table>
                        <tr class="s_tr_tb">
                            @Html.HiddenFor(m => m.ID)
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblInput @Guline.Web.CentralLanguages.Main.lblDisplayName</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.DisplayName, new { @class = "s_text_box" })</td>
                        </tr>
                        <tr class="s_tr_tb">
                            <td></td>
                            <td class="msg">@Html.ValidationMessageFor(m=>m.DisplayName)</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="DoiTenHienThi" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }


            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="nameuser">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblFullName</span>
            <span class="s_content" id="name_id">
                @Model.LastName @Model.FirstName
            </span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#nameuser").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#nameuser").slideToggle();
                    $("#nameuser_edit").slideToggle();
                });
                $("#cancel_name").click(function () {
                    $("#nameuser").slideToggle();
                    $("#nameuser_edit").slideToggle();
                })
                $("#namechange_id").click(function () {
                    DoiTen();
                    $("#nameuser").slideToggle();
                    $("#nameuser_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="nameuser_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblFullName</span>
            @using (Html.BeginForm("Name_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblLastName</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.LastName, new { @class = "s_text_box" })</td>
                        </tr>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblFirstName</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.FirstName, new { @class = "s_text_box" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="namechange_id" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_name" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="email">
            <span class="s_label">Email</span>
            <span class="s_content">@Guline.Web.CentralLanguages.Main.lblEmailPrimary: <b id="email_id">@Model.Email</b></span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#email").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#email").slideToggle();
                    $("#email_edit").slideToggle();
                });
                $("#cancel_email").click(function () {
                    $("#email").slideToggle();
                    $("#email_edit").slideToggle();
                })
                $("#submit_email").click(function () {
                    DoiEmail();
                    $("#email").slideToggle();
                    $("#email_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="email_edit">
            <span class="s_label">Email</span>
            @using (Html.BeginForm("Email_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblEmailPrimary</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.Email, new { @class = "s_text_box" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="submit_email" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_email" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="password">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblPassword</span>
            <span class="s_content"><i>@Guline.Web.CentralLanguages.Main.lblNeverChangePass</i></span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#password").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#password").slideToggle();
                    $("#password_edit").slideToggle();
                });
                $("#cancel_password").click(function () {
                    $('#msg_id').empty();
                    $("#password").slideToggle();
                    $("#password_edit").slideToggle();
                })
                $("#password_old").keyup(function () {
                    document.getElementById("check_pass").disabled = false;
                    if( $("#password_old").val()=="")
                    {
                        $('#msg_id').empty();
                        document.getElementById("check_pass").disabled = true;
                        document.getElementById("password_new").disabled = true;
                        document.getElementById("password_new1").disabled = true;
                    }
                })
                $("#check_pass").click(function () {
                    KtraPassword();
                })
                $("#password_new1").keyup(function () {
                    if($("#password_new").val()==$("#password_new1").val())
                    {
                        $('#msg_id').empty();
                        $('#msg_id').append("<td colspan='2' style='color:green;text-align:center;height:39px;'><i>OK</i></td>");
                        document.getElementById("submit_password").disabled = false;
                    }
                    else
                    {
                        $('#msg_id').empty();
                        $('#msg_id').append("<td colspan='2' style='color:red;text-align:center;height:39px;'><i>Mật khẩu không giống nhau!</i></td>");
                        document.getElementById("submit_password").disabled = true;
                    }
                })
                $("#submit_password").click(function () {
                    
                    $("#password").slideToggle();
                    $("#password_edit").slideToggle();
                    DoiMK();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="password_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblPassword</span>
            @using (Html.BeginForm("Password_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblOldPassword</td>
                            <td class="s_content_sub td_left">
                                @Html.Password("password_old")
                                <input type="button" id="check_pass" disabled="disabled" value="Kiểm tra">
                            </td>
                        </tr>
                        <tr class="s_tr_tb" id="msg_id"></tr>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblNewPassword</td>
                            <td class="s_content_sub td_left">@Html.Password("password_new", null, new { disabled = "disabled" })</td>
                        </tr>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblConfirmPassword</td>
                            <td class="s_content_sub td_left">@Html.Password("password_new1", null, new { disabled = "disabled" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="submit_password" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" disabled="disabled" />
                    <input type="reset" id="cancel_password" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }
            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="birthday">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblBirthday</span>
            <span class="s_content" id="birthday_id">@Model.BirthDay.ToString("dd/MM/yyyy")</span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#birthday").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#birthday").slideToggle();
                    $("#birthday_edit").slideToggle();
                });
                $("#cancel_birthday").click(function () {
                    $("#birthday").slideToggle();
                    $("#birthday_edit").slideToggle();
                })
                $("#submit_birthday").click(function () {
                    DoiNgaySinh();
                    $("#birthday").slideToggle();
                    $("#birthday_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="birthday_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblBirthday</span>
            @using (Html.BeginForm("Birthday_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblDay</td>
                            <td class="s_content_sub td_left">@Html.DropDownList("Days", (SelectList)ViewBag.Day, new { @class = "l_se_day" })</td>
                        </tr>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblMonth</td>
                            <td class="s_content_sub td_left">@Html.DropDownList("Months", (SelectList)ViewBag.Month, new { @class = "l_se_month" })</td>
                        </tr>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblYear</td>
                            <td class="s_content_sub td_left">@Html.DropDownList("Years", (SelectList)ViewBag.Year, new { @class = "l_se_year" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="submit_birthday" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_birthday" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>

    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="gender">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblGender</span>
            <span class="s_content" id="gender_id">

                @{
                    if (Model.Gender == false)
                    {
                        <b>@Guline.Web.CentralLanguages.Main.lblMale</b>
                    }
                    else
                    {
                        <b>@Guline.Web.CentralLanguages.Main.lblFemale</b>
                    }
                }

            </span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#gender").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#gender").slideToggle();
                    $("#gender_edit").slideToggle();
                });
                $("#cancel_gender").click(function () {
                    $("#gender").slideToggle();
                    $("#gender_edit").slideToggle();
                })
                $("#gender_submit").click(function () {
                    DoiGT();
                    $("#gender").slideToggle();
                    $("#gender_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="gender_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblGender</span>
            @using (Html.BeginForm("Gender_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblChoice @Guline.Web.CentralLanguages.Main.lblGender</td>
                            <td class="s_content_sub">
                                <span class="l_rad_gender">

                                    <label style="font-size:16px">@Html.RadioButtonFor(m => m.Gender, true, new { id = "u_0_d" }) @Guline.Web.CentralLanguages.Main.lblFemale</label>
                                </span>
                                <span class="l_rad_gender">

                                    <label style="font-size:16px">@Html.RadioButtonFor(m => m.Gender, false, new { id = "u_0_e" }) @Guline.Web.CentralLanguages.Main.lblMale</label>
                                </span>
                            </td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="gender_submit" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_gender" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="phone">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblMobilePhone</span>
            <span class="s_content" id="phone_id">
                @{
                    if (@Model.Phone != null)
                    {
                        @Model.Phone
                    }
                    else
                    {
                        <i>@Guline.Web.CentralLanguages.Main.lblNoNumberPhone!</i>
                    }
                }
            </span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#phone").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#phone").slideToggle();
                    $("#phone_edit").slideToggle();
                });
                $("#cancel_phone").click(function () {
                    $("#phone").slideToggle();
                    $("#phone_edit").slideToggle();
                })
                $("#submit_phone").click(function () {
                    DoiSDT();
                    $("#phone").slideToggle();
                    $("#phone_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="phone_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblMobilePhone</span>
            @using (Html.BeginForm("Phone_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblInput @Guline.Web.CentralLanguages.Main.lblPhoneNumber</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.Phone, new { @class = "s_text_box" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="submit_phone" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_phone" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>
    </li>
    <li class="s_li_lv1">
        <div class="s_a_lv1 hover" id="language">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblLanguage</span>
            <span class="s_content" id="language_id">
                @{
                    if (@Model.Phone != null)
                    {
                        @Model.Phone
                    }
                    else
                    {
                        <i>@Guline.Web.CentralLanguages.Main.lblNoNumberPhone!</i>
                    }
                }
            </span>
            <span class="s_link_setting">
                <i class="s_img"></i>
                @Guline.Web.CentralLanguages.Main.lblEdit
            </span>
        </div>
        <script>
            $(document).ready(function () {
                $("#language").click(function () {
                    $(".s_a_lv1_f").slideUp();
                    $(".s_a_lv1").slideDown();
                    $("#language").slideToggle();
                    $("#language_edit").slideToggle();
                });
                $("#cancel_language").click(function () {
                    $("#language").slideToggle();
                    $("#language_edit").slideToggle();
                })
                $("#submit_language").click(function () {
                    DoiSDT();
                    $("#language").slideToggle();
                    $("#language_edit").slideToggle();
                })
            });
        </script>
        <div class="s_a_lv1_f" id="language_edit">
            <span class="s_label">@Guline.Web.CentralLanguages.Main.lblLanguage</span>
            @using (Html.BeginForm("Language_Change", "Dashboard"))
            {
                <div class="s_content_act">
                    @Html.HiddenFor(m => m.ID)
                    <table>
                        <tr class="s_tr_tb">
                            <td class="s_label_sub">@Guline.Web.CentralLanguages.Main.lblInput @Guline.Web.CentralLanguages.Main.lblPhoneNumber</td>
                            <td class="s_content_sub">@Html.EditorFor(m => m.Phone, new { @class = "s_text_box" })</td>
                        </tr>
                    </table>
                    <hr class="s_line" />
                    <input type="button" id="submit_language" class="s_submit" value="@Guline.Web.CentralLanguages.Main.lblSaveChange" />
                    <input type="button" id="cancel_language" class="s_cancel" value="@Guline.Web.CentralLanguages.Main.lblCancel" />
                </div>
            }

            <div class="clr"></div>
        </div>
    </li>
</ul>